<style include="settings-shared iron-flex iron-flex-alignment">
  :host {
    --add-account-margin-top: 16px;
  }

  .account-manager-description {
    color: var(--cr-secondary-text-color);
    display: block;
    max-width: 560px;
  }

  .account-manager-description.full-width {
    max-width: none;
  }

  .profile-icon {
    --profile-icon-size: 40px;
    background: center / cover no-repeat;
    border-radius: 50%;
    flex-shrink: 0;
    height: var(--profile-icon-size);
    width: var(--profile-icon-size);
  }

  .profile-icon.device-account-icon {
    --profile-icon-size: 60px;
    margin-top: 16px;
  }

  .device-account-container {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .device-account-container .primary {
    font-weight: 500;
    margin-bottom: 4px;
    margin-top: 16px;
  }

  .account-list-item {
    padding-inline-end: 8px;
    padding-inline-start: 0;
  }

  #outer {
    margin-inline-end: var(--cr-section-padding);
    margin-inline-start: 60px;
  }

  .middle .secondary {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .secondary-accounts-policy-indicator {
    margin-inline-end: 12px;
  }

  .settings-box.user-message {
    align-items: flex-end;
  }

  .secondary-accounts-tooltip {
    margin-inline-start: 5px;
    width: 15px;
  }

  .settings-box.secondary-accounts-box {
    align-items: flex-end;
  }

  .account-list-header-description {
    align-items: center;
    display: flex;
    width: 100%;
  }

  .account-list-header-description > .secondary {
    flex-grow: 1;
  }

  .account-list-header-description > .secondary {
    padding-inline-end: 40px;
  }

  .secondary-accounts-disabled-tooltip {
    padding-inline-end: 12px;
  }

  #account-list-header > h2 {
    padding-bottom: 8px;
    padding-top: 16px;
  }

  #account-list-header {
    padding-bottom: 8px;
  }

  cr-policy-indicator {
    margin-inline-end: 1em;
    margin-top: var(--add-account-margin-top);
  }

  .secondary-accounts-box > #add-account-button {
    margin-bottom: 12px;
    margin-top: 12px;
  }

  #add-account-icon {
    -webkit-mask-image: url(chrome://resources/images/add.svg);
    background-color: currentColor;
    height: 24px;
    margin-inline-end: 0.5em;
    width: 24px;
  }

  .signed-out-text {
    color: var(--cros-text-color-alert);
  }

  .error-badge {
    background: url(chrome://os-settings/images/error_badge.svg)
        center / cover no-repeat;
    display: block;
    height: 20px;
    left: 60%;
    position: relative;
    top: 60%;
    width: 20px;
  }

  @media (prefers-color-scheme: dark) {
    .error-badge {
      background: url(chrome://os-settings/images/error_badge_dark.svg)
          center / cover no-repeat;
    }
  }

  :host-context([dir='rtl']) .error-badge {
    left: auto;
    right: 60%;
  }

  .managed-badge {
    --badge-offset: calc(100% - var(--badge-size)
                         - 2 * var(--padding-size));
    --badge-size: 10px;
    --padding-size: 4px;
    background: var(--cros-icon-color-prominent);
    border-radius: 50%;
    height: var(--badge-size);
    left: var(--badge-offset);
    padding: var(--padding-size);
    position: relative;
    top: var(--badge-offset);
    width: var(--badge-size);
  }

  .managed-badge > iron-icon {
    --iron-icon-fill-color: var(--cros-bg-color-elevation-1);
    --iron-icon-height: var(--badge-size);
    --iron-icon-width: var(--badge-size);
    display: block;
  }

  :host-context([dir='rtl']) .managed-badge {
    left: auto;
    right: var(--badge-offset);
  }

  .managed-message {
    color: var(--cr-secondary-text-color);
    justify-content: center;
    margin-top: 16px;
  }

  .managed-message > iron-icon,
  .managed-message > cr-icon-button {
    margin-inline-end: 5px;
  }

  .management-status {
    color: var(--cr-secondary-text-color);
    overflow: hidden;
    text-align: end;
    text-overflow: ellipsis;
    width: 18ch;
  }

  .edu-account-label {
    margin-inline-start: 12px;
  }

  #removeConfirmationButton {
    --active-shadow-action-rgb: var(--google-red-500-rgb);
    --bg-action: var(--google-red-600);
    --focus-shadow-color: rgba(var(--google-red-600-rgb), .4);
    --hover-bg-action: rgba(var(--google-red-600-rgb), .9);
    --hover-shadow-action-rgb: var(--google-red-500-rgb);
    --hover-border-color: var(--google-red-100);
    --hover-shadow-action-rgb: var(--google-red-500-rgb);
  }
</style>
<!-- Account management description -->
<div class="settings-box first account-manager-description full-width">
  <localized-link
      localized-string="[[getAccountManagerDescription_()]]"
      link-url="$i18nRaw{accountManagerLearnMoreUrl}">
  </localized-link>
</div>
<!-- Managed account badge and message -->
<template is="dom-if" if="[[isDeviceAccountManaged_]]">
  <div class="settings-box first managed-message">
    <template is="dom-if" if="[[!isChildUser_]]">
      <iron-icon icon="cr20:domain"></iron-icon>
    </template>
    <template is="dom-if" if="[[isChildUser_]]">
      <cr-icon-button iron-icon="cr20:kite"
          on-click="onManagedIconClick_">
      </cr-icon-button>
    </template>
    <localized-link
        localized-string=
          "[[getManagementDescription_(isChildUser_, deviceAccount_)]]"
        link-url="$i18nRaw{accountManagerChromeUIManagementURL}">
    </localized-link>
  </div>
</template>
<!-- Primary account icon, name and email -->
<div class="device-account-container"
    aria-labelledby="deviceAccountFullName"
    aria-describedby="deviceAccountEmail">
  <div class="profile-icon device-account-icon"
      aria-hidden="true"
      style="background-image: [[getIconImageSet_(deviceAccount_.pic)]]">
    <template is="dom-if"
        if="[[shouldShowManagedBadge_(isDeviceAccountManaged_,
              isChildUser_)]]">
      <div class="managed-badge">
        <iron-icon icon="cr:work"></iron-icon>
      </div>
    </template>
  </div>
  <span id="deviceAccountFullName" class="primary" aria-hidden="true">
    [[deviceAccount_.fullName]]
  </span>
  <span id="deviceAccountEmail" class="secondary" aria-hidden="true">
    [[deviceAccount_.email]]
  </span>
</div>
<!-- Secondary Accounts list header -->
<div class="secondary-accounts-box settings-box first">
  <div id="account-list-header" class="start">
    <h2>
      [[getAccountListHeader_(isChildUser_)]]
    </h2>
    <div class="account-list-header-description">
      <span class="secondary">
        [[getAccountListDescription_(isChildUser_)]]
      </span>
      <template is="dom-if" if="[[
                              !isSecondaryGoogleAccountSigninAllowed_]]">
        <cr-tooltip-icon
            class="secondary-accounts-disabled-tooltip"
            icon-class="[[getManagedAccountTooltipIcon_(isChildUser_)]]"
            tooltip-text="[[getSecondaryAccountsDisabledUserMessage_(
                                isChildUser_)]]"
            icon-aria-label="[[getSecondaryAccountsDisabledUserMessage_(
                                  isChildUser_)]]">
        </cr-tooltip-icon>
      </template>
      <cr-button disabled="[[!isSecondaryGoogleAccountSigninAllowed_]]"
          id="add-account-button" on-click="addAccount_"
          deep-link-focus-id$="[[Setting.kAddAccount]]">
        <div id="add-account-icon"></div>
        [[getAddAccountLabel_(isChildUser_,
            isSecondaryGoogleAccountSigninAllowed_)]]
      </cr-button>
    </div>
  </div>
</div>
<!-- Secondary Accounts list -->
<div id="outer" class="layout vertical nowrap" role="list">
  <template is="dom-repeat" id="account-list"
      items="[[getSecondaryAccounts_(accounts_)]]">
    <div class="settings-box account-list-item" role="listitem">
      <div class="profile-icon"
          style="background-image: [[getIconImageSet_(item.pic)]]">
        <template is="dom-if" if="[[!item.isSignedIn]]">
          <span class="error-badge"></span>
        </template>
      </div>
      <div class="middle two-line no-min-width">
        <div class="flex text-elide">
          <!-- If account is signed in, display the full name -->
          <template is="dom-if" if="[[item.isSignedIn]]">
            <span id="fullName-[[index]]"
                aria-hidden="true">[[item.fullName]]</span>
          </template>
          <!-- Else, display a re-authentication message -->
          <template is="dom-if" if="[[!item.isSignedIn]]">
            <span class="signed-out-text">
              [[getAccountManagerSignedOutName_(item.unmigrated)]]
            </span>
          </template>
          <div class="secondary" id="email-[[index]]"
              aria-hidden="true">[[item.email]]</div>
        </div>
      </div>
      <!-- Display ARC status -->
      <template is="dom-if" if="[[isArcAccountRestrictionsEnabled_]]">
        <span class="arc-availability secondary"
            hidden$="[[item.isAvailableInArc]]">
          <!-- TODO(crbug.com/1260909): Use real strings -->
          Not shared with Android apps
        </span>
      </template>
      <template is="dom-if"
          if="[[shouldShowReauthenticationButton_(item)]]">
        <cr-button title="[[getAccountManagerSignedOutTitle_(item)]]"
            class="reauth-button" on-click="onReauthenticationTap_"
            aria-labelledby$="fullName-[[index]] email-[[index]]">
          [[getAccountManagerSignedOutLabel_(item.unmigrated)]]
        </cr-button>
      </template>
      <!-- Display a hamburger menu for removing the account -->
      <cr-icon-button class="icon-more-vert"
          title="[[getMoreActionsTitle_(item)]]"
          aria-label="[[getMoreActionsTitle_(item)]]"
          aria-describedby$="fullName-[[index]]
                              edu-account-label-[[index]]"
          on-click="onAccountActionsMenuButtonTap_"
          deep-link-focus-id$="[[Setting.kRemoveAccount]]">
      </cr-icon-button>
    </div>
  </template>
  <cr-action-menu role-description="$i18n{menu}">
    <button class="dropdown-item" on-click="onRemoveAccountTap_">
      $i18n{removeAccountLabel}
    </button>
    <template is="dom-if" if="[[isArcAccountRestrictionsEnabled_]]">
      <button class="dropdown-item" on-click="onChangeArcAvailability_">
        [[getChangeArcAvailabilityLabel_(actionMenuAccount_)]]
      </button>
    </template>
  </cr-action-menu>
</div>
<div class="settings-box"></div>
<cr-dialog id="removeConfirmationDialog">
  <div slot="title" class="key-text">
    $i18n{removeLacrosAccountDialogTitle}
  </div>
  <div slot="body" class="warning-message">
    $i18n{removeLacrosAccountDialogBody}
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button"
        on-click="onRemoveAccountDialogCancelTap_">
      $i18n{removeLacrosAccountDialogCancel}
    </cr-button>
    <cr-button id="removeConfirmationButton" class="action-button"
        on-click="onRemoveAccountDialogRemoveTap_">
      $i18n{removeLacrosAccountDialogRemove}
    </cr-button>
  </div>
</cr-dialog>
